<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .input-card {
            width: 25rem;
        }

        .input-card .btn {
            width: 7rem;
            margin-right: .7rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<div id="container" tabindex="0"></div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=079c9277acf0b36bf293b52cf34a0e1c"></script>

<script type="text/javascript">
    var cityData = ${cityData};
    cityData = eval(cityData);
    var cluster, markers = [];
    var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/d4558a3e687feed4e624bf9a100987bc',
        center: [106.114129, 35.550339],
        resizeEnable: true,
        zoom: 6
    });
    AMap.plugin('AMap.ToolBar', function () {//异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });

    var style = [{
        url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
    }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
        anchor: new AMap.Pixel(4, 4),
        size: new AMap.Size(7, 7)
    }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
        anchor: new AMap.Pixel(3, 3),
        size: new AMap.Size(5, 5)
    }
    ];

    var mass = new AMap.MassMarks(cityData, {
        opacity: 0.8,
        zIndex: 111,
        cursor: 'pointer',
        style: style
    });

    var marker = new AMap.Marker({content: ' ', map: map});

    mass.on('mouseover', function (e) {
        marker.setPosition(e.data.lnglat);
        marker.setLabel({content: e.data.name})
    });

    mass.setMap(map);

</script>
</body>
</html>